<template>
  <t-space direction="vertical" style="width: 100%">
    <!-- 订单阶段 -->
    <t-steps v-if="orderDetails.currentOrderStage" v-model:current="orderDetails.currentOrderStage" @change="handleChange">
      <t-step-item
        v-for="_ in dictionaryStore.get('decoration_order_stage')"
        :key="_.value"
        :title="_.label"
        :value="_.value"
        :content="analysisOrderTime(_.value)"
      />
    </t-steps>
    <!-- 设计阶段 -->
    <t-steps
      v-if="orderDetails.currentOrderStage === '1'&&orderDetails.designerStage"
      :default-current="orderDetails.designerStage"
      readonly
    >
      <t-step-item
        v-for="_ in dictionaryStore.get('order_designer_stage')"
        :key="_.value"
        :title="_.label"
        :value="_.value"
      >
        <template #content>
          <div v-if="analysisDesignerTime(_.value)">
            <div>{{ formatTimeOnly(_.value) }}</div>
            <div v-if="hasDelay(_.value)" style="color: red;">
              延期数量：{{ getDelayCount(_.value) }}
            </div>
          </div>
        </template>
      </t-step-item>
    </t-steps>
    <!-- 施工阶段 -->
    <t-steps
      v-if="orderDetails.currentOrderStage === '3'&&orderDetails.engineeringStage"
      :default-current="orderDetails.engineeringStage"
      readonly
    >
      <t-step-item
        v-for="_ in dictionaryStore.get('engineering_stage')"
        :key="_.value"
        :title="_.label"
        :value="_.value"
        :content="analysisEnginerringTime(_.value)"
      />
    </t-steps>
    <t-steps
      v-if="orderDetails.currentOrderStage === '3'&&orderDetails.productStage"
      :default-current="orderDetails.productStage"
      readonly
    >
      <t-step-item
        v-for="_ in dictionaryStore.get('zheng_product_stage')"
        :key="_.value"
        :title="_.label"
        :value="_.value"
        :content="analysisProductTime(_.value)"
      />
    </t-steps>
    <!-- 产品阶段 -->
    <t-steps
      v-if="orderDetails.currentStage"
      v-model:current="orderDetails.currentStage"
      readonly
    >
      <t-step-item
        v-for="_ in dictionaryStore.get('zheng_product_stage')"
        :key="_.value"
        :title="_.label"
        :value="_.value"
        :content="analysisProductTime(_.value)"
      />
    </t-steps>
    <!-- 单品阶段 -->
    <t-steps
      v-if="orderDetails.currentSingleStage"
      v-model:current="orderDetails.currentSingleStage"
      readonly
    >
      <t-step-item
        v-for="_ in dictionaryStore.get('single_product_stage')"
        :key="_.value"
        :title="_.label"
        :value="_.value"
      >
      <template #content>
          <div v-if="analysisTime(_.value)">
            <div>{{ formatTimeSingle(_.value) }}</div>
            <div v-if="hasDelaySingle(_.value)" style="color: red;">
              延期数量：{{ getDelayCountSingle(_.value) }}
            </div>
          </div>
        </template>
    </t-step-item>
    </t-steps>
  </t-space>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { inject, Ref } from 'vue';

import { useDictionaryStore } from '@/store';

// 字典仓库
const dictionaryStore = useDictionaryStore();
// 订单详情
const orderDetails = inject<Ref<Record<string, any>>>('orderDetails');
// 解析时间
const analysisTime = (keysString: any) => {
  if (!keysString) return '';
  let { timeMap } = orderDetails.value;
  if(timeMap) {
      const hasOA = timeMap[`${keysString}oa`] !== undefined;
  const hasTime = timeMap[keysString] !== undefined;
 
   if (hasOA&&hasTime) {
      return `
      <div>${dayjs(timeMap[keysString]).format('YYYY-MM-DD HH:mm:ss')}</div>
      <div style="color: red;">延期数量：${timeMap[`${keysString}oa`]}</div>
    `;
  } else if(hasOA&&!hasTime) {
    return `
      <div style="color: red;">延期数量：${timeMap[`${keysString}oa`]}</div>
    `;
  } else if(!hasOA&&hasTime){
    return dayjs(timeMap[keysString]).format('YYYY-MM-DD HH:mm:ss');
  } else {
    return ''
  }
  } else {
    return ''
  }

};
const formatTimeSingle = (keysString: any) => {
  const time = orderDetails.value.timeMap[keysString];
  if (!time) return '';
  return typeof time === 'number' 
    ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') 
    : time || '';
};
const hasDelaySingle = (keysString: any) => {
  const time = orderDetails.value.timeMap[`${keysString}oa`]
  return time > 0;
};
const getDelayCountSingle = (keysString: any) => {
  return orderDetails.value.timeMap[`${keysString}oa`] || 0;
};
const analysisEnginerringTime = (keysString: any) => {
  if (!keysString) return '';
  let {engineeringStageTimeMap} = orderDetails.value;
  let time = engineeringStageTimeMap
  time=engineeringStageTimeMap[keysString]?engineeringStageTimeMap[keysString]:{}
  if (time.startTime && time.endTime) {
    return `${time.startTime}-\n${time.endTime}`;
  }
  if (time.startTime) {
    if(typeof time.startTime === 'number') return dayjs(time.startTime).format('YYYY-MM-DD HH:mm:ss')
    return time.startTime+'-';
  }
  return '';
};
const analysisProductTime = (keysString: any) => {
  if (!keysString) return '';
  let {productStageTimeMap} = orderDetails.value;
  let time = productStageTimeMap
  time=productStageTimeMap[keysString]
  return typeof time === 'number' ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '';
};
const analysisDesignerTime = (keysString: any) => {
  if (!keysString) return '';
  let { designeeTimeMap } = orderDetails.value;
  let time = designeeTimeMap[keysString];
  console.log(time, 'time');
  
  if (!time) return '';

  const formattedTime = typeof time.time === 'number' 
    ? dayjs(time.time).format('YYYY-MM-DD HH:mm:ss') 
    : time.time || '';

  if (time.yanqiCount === 0) {
    return formattedTime;
  }
  
  if (time.yanqiCount > 0) {
    return `
      <div>${formattedTime}</div>
      <div style="color: red;">延期数量：${time.yanqiCount}</div>
    `;
  }
  
  return '';
};
const formatTimeOnly = (keysString: any) => {
  const time = orderDetails.value.designeeTimeMap[keysString];
  if (!time) return '';
  return typeof time.time === 'number' 
    ? dayjs(time.time).format('YYYY-MM-DD HH:mm:ss') 
    : time.time || '';
};

const hasDelay = (keysString: any) => {
  const time = orderDetails.value.designeeTimeMap[keysString];
  return time?.yanqiCount > 0;
};

const getDelayCount = (keysString: any) => {
  return orderDetails.value.designeeTimeMap[keysString]?.yanqiCount || 0;
};
const analysisOrderTime = (keysString: any) => {
  if (!keysString) return '';
  let {orderTimeMap} = orderDetails.value;
  let time = orderTimeMap
  time=orderTimeMap[keysString]
  if(time) {
    return typeof time === 'number' ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : time;
  }
  return '';
};
// 处理改变
const handleChange = (current: string | number, previous: string | number) => {
  if (current > orderDetails.value.orderStage) orderDetails.value.currentOrderStage = previous;
};
</script>
<style lang="less" scoped>
:deep(.t-steps .t-steps-item__description) {
  font-size: 10px;
  color:#333;
  white-space: pre;
}
</style>
